<template>
  <div class="">
    <el-row class="row-header">
      <el-col :span="2" :offset="5">
        <h2 class="header-h2">Five-Twist</h2>
      </el-col>
      <div class="btn_div">
        <el-button type="primary" round v-if="!isLogin" @click="toLogin"
          >登陆</el-button
        >
        <el-button type="primary" round v-if="isLogin" @click="toMain"
          >管理界面</el-button
        >
        <el-button type="primary" round v-if="isLogin" @click="loginOut"
          >退出登陆</el-button
        >
      </div>
    </el-row>
    <div id="container"></div>

    <!-- 求职栏的标题与按钮 -->
    <el-row style="background: #eeeeee" type="flex" justify="center">
      <el-col :span="15">
        <h1 style="font-size: 50px">Hello {{ userName }} 欢迎来到人才广场</h1>
        <div id="highCharts" class="chartsConter"></div>
      </el-col>
    </el-row>

    <el-row
      style="height: 280px; background: #eeeeee"
      type="flex"
      justify="center"
    >
      <el-divider></el-divider>
      <el-col :span="15">
        <h2>在这里你可以浏览到各个领域的求职者信息</h2>
      </el-col>
      <el-col :span="4" :offset="18">
        <el-button type="primary" @click="handleEmpMessage" v-if="isEm"
          >发布信息</el-button
        >
      </el-col>
      <el-col :span="4" :offset="18">
        <el-button type="primary" @click="toLogin" v-if="!isLogin"
          >登录后发布信息</el-button
        >
      </el-col>
      <div class="btn1_div">
        <el-button type="primary" @click="moreEmpMessages">查看更多求职信息 >></el-button>
      </div>
    </el-row>

    <!--求职信息-->
    <!-- finish -->
    <el-row style="background: #eeeeee" type="flex" justify="center">
      <el-col :span="15">
        <el-card
          class="el_card_public"
          shadow="never"
          v-for="empMessage in empMessages"
          :key="empMessage"
        >
          <template #header>
            <div class="card-header">
              <h3>{{ empMessage.userName }}</h3>
            </div>
          </template>
          <div>
            <el-form>
              <el-form-item label="应聘职位">{{
                empMessage.position
              }}</el-form-item>
              <el-form-item label="期望年薪(万)">{{
                empMessage.salary
              }}</el-form-item>
              <el-form-item label="描述">{{ empMessage.text }}</el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-divider></el-divider>
    </el-row>

    <!-- emp发布信息抽屉 -->
    <el-drawer
      v-model="empDrawer"
      :with-header="false"
      :before-close="handleClose"
      destroy-on-close
    >
      <el-card class="el_card_public" shadow="never">
        <template #header>
          <div class="card-header">
            <h3>{{ empOwnMessage.userName }}</h3>
            <div style="text-align: right">
              <el-button
                type="text"
                @click="deleteEmpMessageRow"
                v-if="!empFirstPost"
                >删除</el-button
              >
            </div>
          </div>
        </template>
        <div>
          <el-form>
            <el-form-item label="应聘职位" prop="empPPosition">
              <el-col :span="20" :offset="4">
                <el-input
                  v-model="empOwnMessage.position"
                  @input="forceUpdate($event)"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="期望年薪(万)" prop="empPSalary">
              <el-col :span="20" :offset="2">
                <el-input
                  v-model="empOwnMessage.salary"
                  @input="forceUpdate($event)"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="描述">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 8 }"
                @input="forceUpdate($event)"
                v-model="empOwnMessage.text"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="postEmpMessage()"
                >发布/保存</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-drawer>

    <!--招聘信息栏的标题与按钮-->
    <el-row
      style="height: 280px; background: #eeeeee"
      type="flex"
      justify="center"
    >
      <el-col :span="8" :offset="0">
        <h2 class="h2_">在这里你可以浏览到各个公司的招聘信息</h2>
      </el-col>
      <el-col :span="4" :offset="18">
        <el-button type="primary" @click="handleHrMessage" v-if="isHr"
          >管理招聘信息</el-button
        >
      </el-col>
      <el-col :span="4" :offset="18">
        <el-button type="primary" @click="toLogin" v-if="!isLogin"
          >登录后发布信息</el-button
        >
      </el-col>
      <div class="btn1_div">
        <el-button type="primary" @click="moreHrMessages">查看更多招聘信息 >></el-button>
      </div>
    </el-row>

    <!-- 招聘信息 -->
    <el-row style="background: #eeeeee" type="flex" justify="center">
      <el-col :span="15">
        <el-card
        class="el_card_public"
          shadow="never"
          v-for="hrMessage in hrMessages"
          :key="hrMessage"
        >
          <template #header>
            <div class="card-header">
              <h3>{{ hrMessage.userName }}</h3>
              <div style="text-align: right"></div>
            </div>
          </template>
          <div>
            <el-form>
              <el-form-item label="招聘职位">{{
                hrMessage.position
              }}</el-form-item>
              <el-form-item label="年薪(万)">{{
                hrMessage.salary
              }}</el-form-item>
              <el-form-item label="描述">{{ hrMessage.text }}</el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- hr信息抽屉 -->
    <el-drawer
      v-model="hrDrawer"
      title="已经发布的招聘信息"
      size="50%"
      :before-close="handleClose"
      destroy-on-close
    >
      <el-button class="btn_table" size="mini" @click="innerDrawer = true"
        >添加</el-button
      >
      <el-table :data="hrOwnMessages">
        <el-table-column width="100" type="expand">
          <template #default="props">
            <el-form label-position="left">
              <el-form-item label="描述">
                <span>{{ props.row.text }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          prop="position"
          label="招聘职位"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="salary"
          label="年薪(万)"
          width="150"
        ></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button
              @click.prevent="deleteHrMessageRow(scope.row)"
              type="text"
              size="small"
            >
              删除
            </el-button>
            <el-button
              @click.prevent="editHrMessageRow(scope.row)"
              type="text"
              size="small"
            >
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-drawer
        title="修改招聘信息"
        :append-to-body="true"
        :before-close="handleClose"
        v-model="innerEditDrawer"
      >
        <el-form>
          <el-form-item label="招聘职位">
            <el-col :span="10">
              <el-input v-model="hrEditMessage.position"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="年薪(万)&nbsp">
            <el-col :span="6">
              <el-input v-model="hrEditMessage.salary"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 8 }"
              v-model="hrEditMessage.text"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="EditHrMessage()"
              >确认修改</el-button
            >
          </el-form-item>
        </el-form>
      </el-drawer>
      <el-drawer
        title="添加招聘信息"
        :append-to-body="true"
        :before-close="handleClose"
        v-model="innerDrawer"
      >
        <el-form>
          <el-form-item label="招聘职位">
            <el-col :span="10">
              <el-input
                v-model="hrPostMessage.position"
                @input="forceUpdate($event)"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="年薪(万)&nbsp">
            <el-col :span="8">
              <el-input
                v-model="hrPostMessage.salary"
                @input="forceUpdate($event)"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 8 }"
              @input="forceUpdate($event)"
              v-model="hrPostMessage.text"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addHrMessage()"
              >确认添加</el-button
            >
          </el-form-item>
        </el-form>
      </el-drawer>
    </el-drawer>

    <!-- 词云 -->
    <!-- <el-row style="background: #eeeeee" type="flex" justify="center">
      <el-col :span="15">
        <el-divider></el-divider>
        <p>词云</p>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import Highcharts from "highcharts/highcharts";
import wordcloud from "highcharts/modules/wordcloud";
wordcloud(Highcharts);
export default {
  name: "hrMain",
  data() {
    return {
      userName: this.$store.state.loginInfor.userName,
      empMessages: [],
      hrMessages: [],
      cloudData: [],
      isLogin: this.$store.getters.isLogined,

      isHr: this.$store.getters.isHr,
      isEm: this.$store.getters.isEm,

      empFirstPost: true,

      hrOwnMessages: [],
      empOwnMessage: [],
      hrPostMessage: {
        text: "",
        position: "",
        salary: "",
      },
      hrEditMessage: {
        text: "",
        position: "",
        salary: "",
        mesID: "",
      },

      empDrawer: false,
      hrDrawer: false,
      innerDrawer: false,
      innerEditDrawer: false,

      
    };
  },
  methods: {
    deleteHrMessageRow: function (row) {
      //hr删除自己的招聘信息
      console.log(row);
      var that = this;
      that.$axios
        .get("http://47.100.167.206:8082/Message/deleteMessage", {
          params: {
            mesid: row.mesID,
          },
          headers: {
            token: this.$store.state.loginInfor.token,
          },
        })
        .then(
          function (response) {
            console.log(response);
            if (response.data.message == "success delete") {
              that.$message({
                type: "success",
                message: "删除成功",
              });
              that.fetchHrDrawerData();
              that.fetchData();
            }
          },
          function (err) {
            console.log(err);
            that.$message({
              type: "error",
              message: "网络请求失败。。。",
            });
          }
        );
    },

    deleteEmpMessageRow: function () {
      //员工用户删除求职信息

      var that = this;
      that.$axios
        .get("http://47.100.167.206:8082/Message/deleteMessage", {
          params: {
            mesid: that.empOwnMessage.mesID,
          },
          headers: {
            token: this.$store.state.loginInfor.token,
          },
        })
        .then(
          function (response) {
            console.log(response);
            if (response.data.message == "success delete") {
              that.$message({
                type: "success",
                message: "删除成功",
              });
              that.fetchEmpDrawerData();
              that.fetchData();
            }
          },
          function (err) {
            console.log(err);
            that.$message({
              type: "error",
              message: "网络请求失败。。。",
            });
          }
        );
    },

    postEmpMessage: function () {
      //员工用户发布/修改自己的求职信息
      var that = this;
      if (that.empFirstPost) {
        //如果是第一次保存，则使用添加接口
        that.$axios
          .get("http://47.100.167.206:8082/Message/sendEmpMessage", {
            params: {
              position: that.empOwnMessage.position,
              salary: that.empOwnMessage.salary,
              text: that.empOwnMessage.text,
            },
            headers: {
              token: that.$store.state.loginInfor.token,
            },
          })
          .then(
            function (response) {
              console.log(response);
              if (response.data.message == "successsend") {
                that.$message({
                  type: "success",
                  message: "成功发布信息",
                });
                that.fetchEmpDrawerData();
                that.fetchData();
              } else {
                that.$message({
                  type: "error",
                  message: "信息发布失败，请确认信息完整有效",
                });
              }
            },
            function (err) {
              console.log(err);
              that.$message({
                type: "error",
                message: "网络错误，信息发布失败",
              });
            }
          );
      } else {
        //如果不是第一次保存，则使用保存接口
        axios
          .get("http://47.100.167.206:8082/Message/modifyMessage", {
            params: {
              mesID: that.empOwnMessage.mesID,
              position: that.empOwnMessage.position,
              salary: that.empOwnMessage.salary,
              text: that.empOwnMessage.text,
            },
            headers: {
              token: that.$store.state.loginInfor.token,
            },
          })
          .then(
            function (response) {
              console.log(response);
            },
            function (err) {
              console.log(err);
            }
          );
      }
    },

    addHrMessage: function () {
      //hr用户发布新的招聘信息
      var that = this;
      that.$axios
        .get("http://47.100.167.206:8082/Message/sendHrMessage", {
          params: {
            position: that.hrPostMessage.position,
            salary: that.hrPostMessage.salary,
            text: that.hrPostMessage.text,
          },
          headers: {
            token: that.$store.state.loginInfor.token,
          },
        })
        .then(
          function (response) {
            console.log(response);
            if (response.data.message == "successsend") {
              that.$message({
                type: "success",
                message: "成功发布",
              });
              that.fetchHrDrawerData();
              that.fetchData();
              that.innerDrawer = false;
            }
          },
          function (err) {
            console.log(err);
            that.$message({
              type: "error",
              message: "网络错误，发布失败",
            });
          }
        );
    },

    editHrMessageRow: function (row) {
      //hr用户修改某条招聘信息,内嵌抽屉打开按钮功能函数
      this.hrEditMessage = {
        text: row.text,
        position: row.position,
        salary: row.salary,
        mesID: row.mesID,
      };
      this.innerEditDrawer = true;
    },

    EditHrMessage: function () {
      //hr用户提交修改
      var that = this;
      that.$axios
        .get("http://47.100.167.206:8082/Message/modifyMessage", {
          params: {
            position: that.hrEditMessage.position,
            salary: that.hrEditMessage.salary,
            text: that.hrEditMessage.text,
            mesid: that.hrEditMessage.mesID,
          },
          headers: {
            token: that.$store.state.loginInfor.token,
          },
        })
        .then(
          function (response) {
            console.log(response);
            if (response.data.message == "success modify") {
              that.$message({
                type: "success",
                message: "修改成功",
              });
              that.innerEditDrawer = false;
              that.fetchHrDrawerData();
              that.fetchData();
            } else {
              that.$message({
                type: "error",
                message: "修改失败，请确认卡片信息完整有效",
              });
            }
          },
          function (err) {
            console.log(err);
            that.$message({
              type: "error",
              message: "网络错误，修改失败",
            });
          }
        );
    },

    handleHrMessage: function () {
      //打开hr管理自己招聘信息卡片功能函数
      this.fetchHrDrawerData();
      this.hrDrawer = true;
    },

    handleEmpMessage: function () {
      //打开员工管理自己求职信息卡片功能函数
      this.fetchEmpDrawerData();
      this.empDrawer = true;
    },

    handleClose(done) {
      //关闭管理卡片功能函数
      this.$confirm("确认关闭？").then((_) => {
        done();
      });
    },

    fetchData: function () {
      //进入页面后获得数据
      //最新招聘信息
      var that = this;
      that.$axios.get("http://47.100.167.206:8082/Message/getLatestHr").then(
        function (response) {
          console.log(response);
          that.hrMessages = response.data.data;
        },
        function (err) {
          console.log(err);
        }
      );
      //最新求职信息
      that.$axios.get("http://47.100.167.206:8082/Message/getLatestEmp").then(
        function (response) {
          console.log(response);
          that.empMessages = response.data.data;
        },
        function (err) {
          console.log(err);
        }
      );
      //最新词云信息
      that.$axios.get("http://47.100.167.206:8082/Message/getCloud").then(
        function (response) {
          console.log(response);
          that.cloudData = response.data.data;
          that.randomWeight();
        },
        function (err) {
          console.log(err);
        }
      );
    },

    fetchHrDrawerData: function () {
      //获取hr抽屉中的数据
      var that = this;
      that.$axios
        .get("http://47.100.167.206:8082/Message/hrGetMyMessage", {
          headers: { token: that.$store.state.loginInfor.token },
        })
        .then(
          function (response) {
            console.log(response);
            if (response.data.message == "success get") {
              that.hrOwnMessages = response.data.data;
            } else {
              that.$message({
                type: "error",
                message: "出现未知错误，打开失败，请重新登录尝试",
              });
            }
          },
          function (err) {
            console.log(err);
            that.$message({
              type: "error",
              message: "网络错误，查看失败",
            });
          }
        );
    },

    fetchEmpDrawerData: function () {
      //获取emp抽屉中的数据
      var that = this;
      that.$axios
        .get("http://47.100.167.206:8082/Message/empGetMyMessage", {
          headers: { token: that.$store.state.loginInfor.token },
        })
        .then(
          function (response) {
            console.log(response);
            if (response.data.data.length == 0) {
              that.empFirstPost = true;
              that.empOwnMessage = {
                userName: that.$store.state.loginInfor.userName,
                position: "",
                salary: "",
                text: "",
              };
            } else {
              that.empFirstPost = false;
              that.empOwnMessage = response.data.data[0];
            }
            console.log(that.empFirstPost);
          },
          function (err) {
            console.log(err);
          }
        );
    },

    loginOut: function () {
      this.$store.commit("login", {
        userName: "",
        station: 0,
        token: "",
      });

      this.isLogin = this.$store.getters.isLogined;

      this.isHr = this.$store.getters.isHr;
      this.isEm = this.$store.getters.isEm;
    },

    toMain: function () {
      if (this.isHr) {
        this.$router.push("/hrMain");
      }
      if (this.isEm) {
        this.$router.push("/emMain");
      }
    },

    toLogin: function () {
      this.$router.push("/login");
    },

    getRandom(start, end, fixed = 0) {
      let differ = end - start;
      let random = Math.random();
      return Number((start + differ * random).toFixed(fixed));
    },
    // 处理一下weight的大小
    randomWeight() {
      let data = [];
      for (let i = 0; i < this.cloudData.length; i++) {
        const el = this.cloudData[i];
        data.push(el);
      }
      this.initClassHighCharts(data);
      console.log("1");
    },
    // 初始化HighCharts
    initClassHighCharts(data) {
      Highcharts.chart("highCharts", {
        // 关闭Highcharts右下方logo
        credits: { enabled: false },
        series: [
          {
            // 把字摆正
            rotation: {
              from: 0,
              to: 0,
              orientations: 5,
            },
            type: "wordcloud",
            data: data,
          },
        ],
        title: {
          text: "",
        },
        chart: {
          backgroundColor: "#eeeeee",
        },
      });
    },

    moreEmpMessages:function(){
       var that = this;
      that.$axios.get("http://47.100.167.206:8082/Message/getAllEmp").then(
        function (response) {
          console.log(response);
          that.empMessages = response.data.data;
        },
        function (err) {
          console.log(err);
        }
      );
    },
    moreHrMessages:function(){
       var that = this;
      that.$axios.get("http://47.100.167.206:8082/Message/getAllHr").then(
        function (response) {
          console.log(response);
          that.hrMessages = response.data.data;
        },
        function (err) {
          console.log(err);
        }
      );
    }
  },
  created() {
    //在组件渲染完成之后获得数据
    this.fetchData();
  },
  
};
</script>

<style scoped>


.el_card_public {
  background: #fbfbfb;
  width: 300px;
  display: inline-block;
  margin: 0.3em;
  border-radius: 20px;
}
/* .grid-content { */
  /* background: rgb(14, 214, 131); */
  /* border-radius: 4px;
  min-height: 80px; */
/* } */
/* .text {
  font-size: 14px;
} */
/* .item {
  padding: 18px 0;
} */
.header-h2 {
  color: #d1d1d1;
}
.header-h2:hover {
  color: #fff;
}
.row-header {
  background: #409eff;
}
.btn_div {
  margin-left: 50%;
}
.btn1_div {
  position: relative;
  margin-right: 49%;
}
.btn_table {
  position: relative;
  left: 40%;
}
</style>